<script setup lang="ts">
import { reactive, ref, watch, computed } from 'vue'

const course = ref([
    {
        name: 'Vue',
        img: 'course/vue.svg',
        description: '一款渐进式JavaScript 框架,易学易用，性能出色，适用场景丰富的 Web 前端框架'
    },
    {
        name: 'Python',
        img: 'course/pycharm.svg',
        description: 'Python提供了高效的高级数据结构，还能简单有效地面向对象编程'
    },
    {
        name: '数据科学',
        img: 'course/jupyter.svg',
        description: 'Jupyter Notebook 是用于数据处理。它提供了简单、精简、以文档为中心的体验'
    },
    {
        name: '图像',
        img: 'course/ps.svg',
        description: 'Photoshop主要处理以像素所构成的数字图像。可以有效地进行图片编辑和创造工作'
    },
    {
        name: 'C/C++',
        img: 'course/clion.svg',
        description: '适用于 C 和C++的跨平台 IDE,智能 C 和 C++ 编辑器'
    },
    {
        name: '影视后期',
        img: 'course/Ae.svg',
        description: '可以帮助您高效且精确地创建无数种引人注目的动态图形和震撼人心的视觉效果'
    },
    {
        name: 'Java神器',
        img: 'course/idea.svg',
        description: 'IntelliJ IDEA的每个方面都旨在最大限度地提高开发人员的工作效率'
    },
    {
        name: '数据库',
        img: 'course/datagrip.svg',
        description: '一款渐进式JavaScript 框架,易学易用，性能出色，适用场景丰富的 Web 前端框架'
    },
    {
        name: 'UI设计',
        img: 'course/Ai.svg',
        description: '一款渐进式JavaScript 框架,易学易用，性能出色，适用场景丰富的 Web 前端框架'
    },
    {
        name: 'React',
        img: 'course/react.svg',
        description: '一款JavaScript框架,React 使创建交互式 UI 变得轻而易举'
    }

])


</script>
    
<template>
    <div class="container">
        <div class="box">
            <div class="card" v-for="item in course" :key="item.name">
                <div class="face face1">
                    <div class="content">
                        <img :src="item.img" />
                        <h3>{{ item.name }}</h3>
                    </div>
                </div>
                <div class="face face2">
                    <div class="content">
                        <p>{{ item.description }}</p>
                        <a href="#">查看更多</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<style scoped lang="scss">
.container {
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    .box {
        margin: auto;
        display: grid;
        grid-gap: 30px;
        grid-template-columns: repeat(5, 200px);
        grid-template-rows: repeat(2, 150px);

        .card {
            position: relative;
            cursor: pointer;

            .face {
                width: 200px;
                height: 150px;
                transition: 0.5s;
                box-shadow: $box-shadow;

                .content {
                    h3 {
                        margin: 10px 0 0;
                        padding: 0;
                        color: $theme-color;
                        text-align: center;
                        font-size: 20px;
                    }

                    p {
                        font-size: 15px;
                    }

                    a {
                        font-size: 13px;
                        text-align: center;
                        display: block;
                        color: #ffffff;
                        height: 30px;
                        width: 80px;
                        line-height: 30px;
                        border-radius: 5px;
                        background-color: $theme-color;
                    }
                }
            }

            .face1 {
                position: relative;
                // background: #333;
                background: $bgcolor;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1;
                transform: translateY(50px);
            }

            .face.face1 .content {
                transition: 0.5s;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;


                img {
                    width: 80px;
                }
            }

            .face2 {
                position: relative;
                background: $bgcolor;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 20px;
                transform: translateY(-100px);
            }
        }

        .card:hover .face1 {
            transform: translateY(0);
            z-index: 1;


        }

        .card:hover .face.face1 .content {
            opacity: 1;


        }

        .card:hover .face2 {
            transform: translateY(0);
            transition: 1s all;
            z-index: 2;

        }
    }
}
</style>